<template>
    <model title="Search">

        <form class="form-horizontal" id="form">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group row">
                        <label class="col-form-label col-sm-3">Input :</label>
                        <div class="col-sm-6">
                            <textarea class="form-control monospace" name="ct" id="ct" rows="5"
                                      v-model="ct"></textarea>
                            <span class="help-block">e.g.,&nbsp;
                <a href="javascript:void(0);" @click="GetExample"><em>
                                Example</em></a></span>
                        </div>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="form-group row">
                        <label class="col-form-label col-sm-3"> </label>
                        <div class="col-sm-9" style="display: flex">
                            <div class="form-check" v-for="(key,value) in types">
                                <label class="form-check-label">
                                    <template v-if="value === 'name'">
                                        <input type="radio" :value="value" name="t" checked/> {{key}}
                                    </template>
                                    <template v-else>
                                        <input type="radio" :value="value" name="t"/> {{key}}
                                    </template>
                                    <i class="input-helper"></i>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="form-group row">
                        <div class="col-sm-3"></div>
                        <button type="button" class="btn btn-myself" @click="Search"
                                style="width: 200px;margin-left: 15px">
                            Search
                        </button>
                    </div>
                </div>
            </div>
        </form>

        <div id="result" ref="result">

            <my-table></my-table>
        </div>
    </model>
</template>

<script>

    import MyTable from "../config/myTable";

    export default {
        name: "search",
        data() {
            return {
                types: {
                    name: "Name",
                    latin: "Latin Name",
                    family: "Family",
                    familyLatin: "Family Latin",
                    genus: "Genus",
                    genusLatin: "Genus Latin"
                },
                ct:""
            }
        },
        components: {MyTable},
        methods: {
            Search() {
                let index = layer.load(1);

                let types = $("input[name=t]:checked").val()
                axios.post("/PTSG/germ/searchData?content=" + $("#ct").val() + "&types=" + types).then(res => {
                    $("#table").bootstrapTable("load",res.data);
                    layer.close(index);
                    $("#result").show();
                    let target_top = $("#result").offset().top;
                    $("html,body").animate({scrollTop: target_top}, 800);
                })
            },
            GetExample() {
                let types = $('input[name=t]:checked').val()
                if(types === "name"){
                    this.ct = "交趾黄檀"
                }else if(types === "latin"){
                    this.ct = "Dalbergia fusca Pierre"
                }else if(types === "family"){
                    this.ct = "豆科"
                }else if(types === "familyLatin"){
                    this.ct = "Leguminosae"
                }else if(types === "genus"){
                    this.ct = "黄檀属"
                }else if(types === "genusLatin"){
                    this.ct = "Dalbergia"
                }
            }
        },
        mounted() {
            $("#table").bootstrapTable();
        }
    }

</script>

<style lang="scss">

    .form-horizontal {
        margin-top: 20px;

        .col-form-label {
            text-align: right;
        }

    }

    #result {
        display: none;
    }
</style>